<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

  /*注意，设为网格布局grid以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效*/

        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            width: 500px;
            height: 500px;
            border: 10px solid yellow;

            /*设置容器为行内元素 默认为块级元素*/
            display: inline-grid;
            /*display: grid;*/



            /* repeat(4,100px) */
            /* 基于横c竖r  repeat第一个参数是设置几排几列，第二个参数是设置每排每列的尺寸 */
            /* grid-template-columns设置横向的单元格的宽度，有多少个宽度就有多少列 */
            /* grid-template-rows设置竖向的单元格的长度，有多少个长度就有多少行 */
            /* grid-template-columns: repeat(auto-fill, 100px); auto-fill可以使单元格自动充满行或者列 */
            /* grid-template-columns: repeat(3, 1fr); 将3份，将每份平均分为一等份 */
            /* minmax() 最小值最大值 */
            /* grid-template-columns: [c1] 100px [c2] 100px [c3] 100px; 可以给网格加上线段*/
            /* grid-auto-flow: column dense; 更改排列方向类似 flex-direction: column; dense智能填充 */
            /* justify-items: center; 元素在单元格中的对齐方式默认是stretch */
            /* align-items: center; justify-content: center; 与flex一致 */
            justify-items: stretch;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(4, 100px);
            grid-auto-flow: row dense;
            /* grid-template-areas: 'a a a' 'b b b' 'c c c';定义区域名字 在子元素中使用grid-area进行调换子元素的区域 */
            grid-template-areas: 'a a a' 'b b b' 'c c c';
            /* 设置行间距 */
            /* row-gap: 20px;
            column-gap: 20px;
            合写 gap: 20px;
            */
        }

        li {
            color: #fff;
            text-align: center;
        }


        li:nth-child(1) {
            background-color: rgb(87, 85, 85);
            /* grid-column: 1 / 4; 设置元素从第几条线到第几条线结束 */
            /* grid-row-start: span 2; 设置横竖方向上所占几个格子 */
            grid-row-start: span 2;
        }

        li:nth-child(2) {
            background-color: rgb(119, 18, 18);
            /* grid-column: 1 / 3; */
        }

        li:nth-child(3) {
            background-color: rgb(34, 65, 150);
        }

        li:nth-child(4) {
            background-color: rgb(190, 31, 124);
        }

        li:nth-child(5) {
            background-color: rgb(28, 164, 228);
        }

        li:nth-child(6) {
            background-color: rgb(10, 131, 131);
        }

        li:nth-child(7) {
            background-color: rgb(255, 0, 212);
        }

        li:nth-child(8) {
            background-color: rgb(22, 1, 1);
        }

        li:nth-child(9) {
            background-color: rgb(51, 255, 0);
        }

        li:nth-child(10) {
            background-color: rgb(195, 0, 255);
        }

    </style>
</head>
<body>

foo
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
bar
</body>
</html>